<template>
  <div class="home">
    <van-search
      shape="round"
      background="#07C060"
      placeholder="请输入搜索关键词"
      input-align="center"
      @click="search()"
    />
<!-- @rendered="getCateList" -->
    <van-tabs v-model="active"  border   @click="switchTab">
      <van-tab v-for="index in list" :key="index._id" :title="index.name">
        <!-- 下拉刷新 -->
         <van-pull-refresh v-model="isRefresh" @refresh="onRefresh">
<van-list
  v-model="loading"
  :finished="finished"
  finished-text="没有更多了"
  @load="getCateList"
  :immediate-check="false"
>
  <!-- <van-cell v-for="item in list" :key="item" :title="item" /> -->

        <div class="home-text" v-for="item in article" :key="item._id">
          <router-link
            :to="{
              path: '/detail',
              query: { article_id: item._id, user_id: item.author_id },
            }"
          >
            <p>{{ item.title }}</p>
            <img v-for="img in item.imageSrc" :src="img" alt="" :key="img._id" />
            <p>
              用户：{{ item.author }} 评论：{{ item.comment }} 时间：{{
                item.time | formatDate
              }}
            </p>
          </router-link>
        </div>
        </van-list>
        </van-pull-refresh>
      </van-tab>
    </van-tabs>
    <!-- <img v-for="i in article" v-lazy="i" :key="i._id"/> -->
    <div class="home-nav">
      <van-tabbar v-model="active" route>
        <van-tabbar-item icon="home-o" to="/">首页</van-tabbar-item>
        <van-tabbar-item icon="add-o" to="/publish">发布</van-tabbar-item>

        <van-tabbar-item icon="friends-o" to="/my">我的</van-tabbar-item>
      </van-tabbar>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import { Tab, Tabs, List, PullRefresh } from "vant";
export default {
  data() {
    return {
      list: [],
      active: 0,
      article: [],
      cate_id: "",
       loading: false,
      finished: false,
      isRefresh:false,
      skip:0,
      limit:10,
    };
  },
  components: {
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [List.name]: List,
    [PullRefresh.name]: PullRefresh,
  },
  mounted() {
    this.getData();
    // this.getCateList()
  },
  filters: {
    formatDate(value) {
      // 时间戳转换日期格式方法
      if (value == null) {
        return "";
      } else {
        let date = new Date(value);
        let y = date.getFullYear(); // 年
        let MM = date.getMonth() + 1; // 月
        MM = MM < 10 ? "0" + MM : MM;
        let d = date.getDate(); // 日
        d = d < 10 ? "0" + d : d;
        let h = date.getHours(); // 时
        h = h < 10 ? "0" + h : h;
        let m = date.getMinutes(); // 分
        m = m < 10 ? "0" + m : m;
        let s = date.getSeconds(); // 秒
        s = s < 10 ? "0" + s : s;
        return y + "-" + MM + "-" + d + " " + h + ":" + m + ":" + s;
        return y + "-" + MM + "-" + d;
      }
    },
  },
  methods: {

    //   下拉刷新
    onRefresh() {
      this.skip = 0;
      this.finished = false;
      this.getCateList(true);
    },

    //  分类切换功能
    switchTab() {
      this.cate_id = this.list[this.active]._id;

      this.article = [];
      this.skip = 0;
      this.finished = false;

      this.getCateList();
    },

    
  
    getData() {
      this.$http.post("/api/get_cate_list").then((res) => {
        console.log(res);
        this.list = res.data.data;
        this.cate_id = this.list[this.active]._id;
        this.getCateList();
      console.log(this.cate_id);
        console.log(this.list)
      });
    },
    getCateList(flag) {
      // console.log(title);
      // this.cate_id = this.list[title]._id;
      // console.log(this.cate_id);
      this.$http
        .post("/api/get_article_list", {
          cate_id: this.cate_id,
          skip: this.skip,
          limit: this.limit,
        })
        .then((res) => {
          console.log(res);
          // this.article = res.data.data;
         

         if (flag) {
          //  如果是刷新操作
         this.isRefresh = false;  //  结束下拉刷新的转圈
          this.article = res.data.data; //  替换为新的
        } else {
          this.article.push(...res.data.data); //  新数据和老数据 拼接
        }

           let len = this.article.length; //  数量
        if (len >= res.data.count) {
          this.finished = true; //  数据加载完了  再滑也别触发事件了
        } else {
          this.skip = len; // skip  更新
          this.loading = false; //  我可以继续去加载
        }
        });
    },
    search() {
      this.$router.push("/search");
    },
  },
};
</script>
<style lang="less">
a {
  color: #000;
}
// .home{
//   position: relative;
// }
// .home-nav {
//   position: fixed;
// }
.home-text {
  width: 100%;
  display: flex;
}
.home-text img {
  max-width: 100%;
  display: block;
}
.home-text p {
  text-align: center;
}
</style>
